<route lang="json5"></route>

<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./check.title";
import Form from "@/components/StorageForm/index";
import { useMessage } from "wot-design-uni";
import { storageService } from "@/service/storage";
import Spin from "@/components/Spin/index.vue";
import { useScanStore, useToastStore } from "@/store";
import { deliveryService } from "@/service/delivery";

const SCAN_STORE_ID = "START_CHECK_SCAN";

const scanStore = useScanStore();

const List = Form.ListForm;
const Row = Form.CommonRow;

const message = useMessage();
const toastStore = useToastStore();

const loading = ref(false);

const currentId = ref();

const scanList = ref([]);
const basicInfo = reactive({
	id: null,
	mainOrderNumber: null,
	flightName: null,
	alletName: null,
	boxQuantity: null,
	packageQuantity: null,
});

const init = async (mainOrderNumber) => {
	loading.value = true;
	currentId.value = mainOrderNumber;

	try {
		const rs = await deliveryService.getFlightDetail({ mainOrderNumber });
		if (rs) {
			console.log(rs);

			basicInfo.id = rs.id;
			basicInfo.mainOrderNumber = mainOrderNumber;
			basicInfo.flightName = rs.flightName;
			basicInfo.alletName = rs.palletName;
			basicInfo.boxQuantity = rs.boxQuantity;
			basicInfo.packageQuantity = rs.packageQuantity;

			scanList.value = rs.flightTailTripRespList?.map((item) => {
				return {
					id: item.id,
					transportationRoute: item.transportationRoute,
					boxQuantity: item.boxQuantity,
					checkQuantity: item.checkQuantity,
					allcheckQuantity: item.boxQuantity,
					color: item.color,
					detainCondition: item.detainCondition,
				};
			});
			return;
		}
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false;
	}
};

// 基本信息 配置
const basicConfig = computed(() => [
	{
		label: "主单号",
		value: basicInfo.mainOrderNumber,
	},
	{
		label: "航空名称",
		value: basicInfo.flightName,
	},
	{
		label: "板的名称",
		value: basicInfo.alletName,
	},
	{
		label: "总箱数",
		value: basicInfo.boxQuantity,
	},
	{
		label: "总包裹数",
		value: basicInfo.packageQuantity,
	},
]);

// 尾程信息配置
const tailConfig = [
	{
		label: "运输网络",
		key: "transportationRoute",
	},
	{
		label: "箱数",
		key: "boxQuantity",
	},
	{
		label: "清点数量",
		key: "checkQuantity",
		type: "inputNumber",
	},
	{
		label: "颜色",
		key: "color",
	},
	{
		label: "是否有扣押件",
		key: "detainCondition",
	},
];
// 返回
const handleBack = () => {
	uni.navigateBack();
};

// 确认
const handleConfirm = async () => {
	loading.value = true;
	try {
		const detailList = scanList.value.map((item) => ({
			id: item.id,
			checkGoodsQuantity: item.checkQuantity,
		}));

		const params = {
			id: basicInfo.id,
			detailList,
		};

		const rs = await deliveryService.check(params);
		if (rs) {
			// await message.alert("清点完成");
			toastStore.set("清点完成", "success");

			setTimeout(() => {
				// 缺件数量
				let missingNumber = 0;
				scanList.value.forEach((item) => {
					const v = item.boxQuantity - item.checkQuantity;
					missingNumber += v;
				});
				uni.redirectTo({
					url: `/pages/success/index?type=check&mainOrderNumber=${basicInfo.mainOrderNumber}&boxNumber=${basicInfo.boxQuantity}&missingNumber=${missingNumber}`,
				});
			}, 1500);
		}
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false;
	}
};

onLoad((options) => {
	// 有主单号 "开始清点 / 清点提货"
	if (options.mainOrderNumber) {
		init(options.mainOrderNumber);
		return;
	}

	const _v = scanStore.get(SCAN_STORE_ID);
	if (_v) {
		init(_v);
	}
});
</script>

<template>
	<ViewContainer :title="titleConfig">
		<Spin :loading="loading" full>
			<Row :config="basicConfig" />
			<List
				title="入库信息"
				v-model:value="scanList"
				:config="tailConfig"
				class="mt"
				:cusUiConfig="{ labelSpan: 8, valueSpan: 16 }"
			/>

			<view class="btn-group">
				<wd-button
					@click="handleBack"
					class="btn back"
					type="info"
					:round="false"
					>返回</wd-button
				>
				<wd-button @click="handleConfirm" class="btn confirm" :round="false"
					>清点完成</wd-button
				>
			</view>
		</Spin>
	</ViewContainer>
</template>

<style lang="less">
.mt {
	margin-top: 30px;
}

.btn-group {
	display: flex;
	justify-content: center;
	margin: 50px 0;

	.btn {
		width: 45%;
		height: 100px;
	}
}
</style>
